<template>
    <div>
        <div
            id="sport_wrap"
            v-if="sportStatus"
            @click="goPostdemand"
            @mouseover="mouseOver"
            @mouseleave="mouseLeave"
        >
            <div class="el-icon-close deleteImg" @click="showSport"></div>
            <img
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/qiyefuwu_float_ad.png"
                alt=""
            />
        </div>
    </div>
</template>
   
  <script>
import { mapState } from "vuex";
export default {
    name: "dynamicPopUps",
    data() {
        return {
            sportStatus: false,
            moveX: 0, //X轴方向上移动的距离
            moveY: 0, //Y轴方向上移动的距离
            stepX: 1, //图片X轴移动的速度
            stepY: 1, //图片Y轴移动的速度
            directionX: 0, //设置图片在X轴方向上的移动方向   0:向右  1:向左
            directionY: 0, //设置图片在Y轴方向上的移动方向   0:向下  1:向上
            timer: null,
        };
    },
    mounted() {
        this.sportStatus = true;
        this.$nextTick(() => {
            this.start();
        });
    },
    beforeDestroy() {
        this.sportStatus = false;
        clearInterval(this.timer);
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        goPostdemand() {
            if (this.userInfo)
                this.$router.push({
                    path: "/service/postdemand",
                });
            else
                this.$confirm("需要登录后发布", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/service/postdemand",
                            },
                        });
                    })
                    .catch(() => {});
        },
        start() {
            let moveX = localStorage.getItem("sport_wrap_moveX");
            let moveY = localStorage.getItem("sport_wrap_moveY");
            let directionX = localStorage.getItem("sport_wrap_directionX");
            let directionY = localStorage.getItem("sport_wrap_directionY");
            if (moveX) {
                this.moveX = parseInt(moveX);
                this.moveY = parseInt(moveY);
                this.directionX = parseInt(directionX);
                this.directionY = parseInt(directionY);
            }
            this.timer = setInterval(() => {
                this.sportTranstion();
            }, 30);
        },
        sportTranstion() {
            let img = document.getElementById("sport_wrap"); //获得图片所在层的ID
            let height = document.documentElement.clientHeight; //浏览器的高度
            let width = document.documentElement.clientWidth; //浏览器的宽度
            let imgHeight = img.offsetHeight; //飘浮图片的高度
            let imgWidth = img.offsetWidth; //瓢浮图片的宽度
            //设置飘浮图片距离浏览器左侧位置
            img.style.left = parseInt(this.moveX) + "px";
            //设置飘浮图片距离浏览器右侧位置
            img.style.top = parseInt(this.moveY) + "px";
            localStorage.setItem("sport_wrap_moveX", this.moveX);
            localStorage.setItem("sport_wrap_moveY", this.moveY);
            localStorage.setItem("sport_wrap_directionX", this.directionX);
            localStorage.setItem("sport_wrap_directionY", this.directionY);
            //设置图片在Y轴上的移动规律
            if (this.directionY == 0) {
                //飘浮图片在Y轴方向上向下移动
                this.moveY += this.stepY;
            } else {
                //飘浮图片在Y轴方向上向上移动
                this.moveY -= this.stepY;
            }
            if (this.moveY < 0) {
                //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
                this.directionY = 0;
                this.moveY = 0;
            }
            if (this.moveY > height - imgHeight - 10) {
                //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
                this.directionY = 1;
                this.moveY = height - imgHeight - 10;
            }
            //设置图片在X轴上的移动规律
            if (this.directionX == 0) {
                this.moveX += this.stepX;
            } else {
                this.moveX -= this.stepX;
            }
            if (this.moveX < 0) {
                //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
                this.directionX = 0;
                this.moveX = 0;
            }
            if (this.moveX > width - imgWidth) {
                //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
                this.directionX = 1;
                this.moveX = width - imgWidth;
            }
        },
        showSport() {
            //关闭漂浮窗
            this.sportStatus = false;
            clearInterval(this.timer);
        },

        mouseLeave() {
            //鼠标移入
            this.timer = setInterval(() => {
                this.sportTranstion();
            }, 30);
        },
        mouseOver() {
            //鼠标移出
            clearInterval(this.timer);
        },
    },
};
</script>
   
  <style lang="scss" scoped>
#sport_wrap {
    position: fixed;
    z-index: 1000;
    width: 160px;
    height: 160px;
    line-height: 70px;
    cursor: pointer;
    display: block;
    img {
        width: 100%;
        height: 100%;
    }
}
.deleteImg {
    position: absolute;
    right: 4px;
    top: 2px;
    cursor: pointer;
    font-size: 25px;
    color: #fff;
    img {
        width: 100%;
    }
}
</style>